import React from 'react';
import { observer } from 'mobx-react';
import { Modal, Form, Input, message, Select } from 'antd';
import http from 'libs/http';
import store from './store';

@observer
class ShopForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false
    }
  }

  handleSubmit = () => {
    this.setState({ loading: true });
    const formData = this.props.form.getFieldsValue();
    formData['id'] = store.record.id;

    let url = '/api/shop/info/';
    if (store.record.id) url += `${store.record.id}/`;
    http.post(url, formData)
      .then(() => {
        message.success('操作成功');
        store.formVisible = false;
        store.fetchRecords()
      }, () => this.setState({ loading: false }))
  };

  render() {
    const info = store.record;
    const { getFieldDecorator } = this.props.form;
    const itemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 }
    };
    return (
      <Modal
        visible
        maskClosable={false}
        title={store.record.id ? '编辑分店账户' : '新建分店账号'}
        onCancel={() => store.formVisible = false}
        confirmLoading={this.state.loading}
        onOk={this.handleSubmit}>
        <Form>
          <Form.Item {...itemLayout} required label="分店名称">
            {getFieldDecorator('name', { initialValue: info['name'] })(
              <Input placeholder="请输入分店名称" />
            )}
          </Form.Item>
          <Form.Item {...itemLayout} required label="是否默认分店">
            {getFieldDecorator('is_default', { initialValue: info['is_default'] })(
              <Select  defaultValue="false" placeholder="是否默认分店" >
                <Select.Option value="false">否</Select.Option>
                <Select.Option value="true">是</Select.Option>
              </Select>
            )}
          </Form.Item>
          <Form.Item {...itemLayout} required label="分店地址">
            {getFieldDecorator('address', { initialValue: info['address'] })(
              <Input placeholder="请输入分店地址" />
            )}
          </Form.Item>
          <Form.Item {...itemLayout} required label="分店负责人">
            {getFieldDecorator('person', { initialValue: info['person'] })(
              <Input placeholder="请输入分店负责人姓名" />
            )}
          </Form.Item>

          <Form.Item {...itemLayout} required label="负责人电话">
            {getFieldDecorator('mobile', { initialValue: info['mobile'] })(
              <Input placeholder="请输入分店负责人电话" />
            )}
          </Form.Item>
          <Form.Item {...itemLayout} label="备注信息">
            {getFieldDecorator('remark', { initialValue: info['remark'] })(
              <Input placeholder="请输入备注信息" />
            )}
          </Form.Item>
        </Form>
      </Modal>
    )
  }
}

export default Form.create()(ShopForm)
